<!-- home首页 -->
<template>
  <div class="box">
    <div class="box-box">
      <div class="box-hander">
        <div></div>
        <div class="hander-box1">
          <a href="/Shousuo">
            <span>地区</span>
            <input type="text" placeholder="请搜索" />
          </a>
        </div>
        <div @click="ditu">地图</div>
      </div>
      <div class="box1">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img :src="`http://47.102.145.189:8009` + image.imgSrc" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="box2">
        <div class="box-bb21" @click="hezhu">
          <span class="span11"><van-icon name="wap-home-o" /></span>
          <span>租房</span>
        </div>
        <div class="box-bb21" @click="hezhu">
          <span class="span11"><van-icon name="contact" /></span>
          <span>合租</span>
        </div>
        <div class="box-bb21" @click="ditu">
          <span class="span11"><van-icon name="location-o" /></span>
          <span>地址</span>
        </div>
        <div class="box-bb21" @click="quditu">
          <span class="span11"><van-icon name="shop" /></span>
          <span>去出租</span>
        </div>
      </div>
      <div class="box3">
        <div class="box3-box1">
          <h4>租房小组</h4>
          <span class="box3-span1">更多</span>
        </div>
        <div class="box3-box2">
          <div
            class="div-box3-2"
            v-for="(item, index) in lists"
            :key="(item, index)"
          >
            <div class="boxb-shuju">
              <span>{{ item.desc }}</span>
              <span>{{ item.title }}</span>
            </div>
            <img :src="`http://47.102.145.189:8009` + item.imgSrc" alt="" />
          </div>
        </div>
      </div>
      <div class="box4">
        <div class="box4-box1">
          <h4>最新咨询</h4>
          <span class="box3-span1">更多</span>
        </div>
        <div class="box4-box2" v-for="(item, index) in zx" :key="(item, index)">
          <div class="box4-img">
            <img :src="`http://47.102.145.189:8009` + item.imgSrc" alt="" />
          </div>
          <div class="box-shuju">
            <div>
              <span class="box-span1">{{ item.title }}</span>
            </div>
            <div class="box-span2">
              <span>{{ item.from }}</span>
              <span>{{ item.date }}</span>
            </div>
          </div>
        </div>
        <!-- <div class="box4-box2"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  // http://47.102.145.189:8009/home/swiper  //轮播图接口
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      images: [],
      lists: [],
      zx: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    hezhu() {
      this.$router.push("/Shousuo");
    },
    quditu() {
      this.$router.push("/quzhuke");
    },
    ditu() {
      this.$router.push("/Detu");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //录播图
    axios.get("http://47.102.145.189:8009/home/swiper").then((val) => {
      console.log(val.data.body);
      this.images = val.data.body;
    });
    //租房小组
    axios
      .get(
        "http://47.102.145.189:8009/home/groups?area=AREA%7C88cff55c-aaa4-e2e0"
      )
      .then((val) => {
        console.log(val.data.body);
        this.lists = val.data.body;
      });
    //最新咨询http://47.102.145.189:8009/home/news?area=AREA%7C88cff55c-aaa4-e2e0
    axios
      .get(
        "http://47.102.145.189:8009/home/news?area=AREA%7C88cff55c-aaa4-e2e0"
      )
      .then((val) => {
        console.log(val.data.body);
        this.zx = val.data.body;
      });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  background: pink;
}
.box-box {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: rgb(127, 203, 253);
}
.box-hander {
  width: 100%;
  height: 50px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
}
.hander-box1 {
  font-size: 10px;
  width: 70%;
  height: 60%;
  border: 1px solid #000;
  background: #fff;
}
.hander-box1 a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hander-box1 a span {
  width: 15%;
  text-align: center;
  color: #000;
}
.hander-box1 a input {
  width: 85%;
  height: 100%;
  background: #fff;
  outline: none;
  border: none;
  border-left: 1px solid #ccc;
  padding: 0px 10px;
}
.span11 {
  font-weight: bolder;
  color: palegreen;
}
.box1 {
  width: 100%;
  height: 150px;
  border-bottom: 1px solid #000;
  background: rgb(255, 255, 255);
}
.box1 img {
  width: 100%;
  height: 150px;
}
.box2 {
  width: 100%;
  height: 1.5rem;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box-bb21 {
  // background: papayawhip;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box3 {
  width: 100%;
  height: 200px;
  background: #ccc;
  display: flex;
  flex-direction: column;
  // padding: 20px 20px;
  font-size: 10px;
}
.box3-box1 {
  width: 100%;
  height: 40px;
  background: rgb(231, 231, 230);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
}
.box3-box2 {
  width: 100%;
  height: 160px;
  background: rgb(231, 231, 230);
}
.div-box3-2 {
  width: 44%;
  float: left;
  height: 44%;
  background: powderblue;
  margin: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
}
.div-box3-2 img {
  width: 40px;
  height: 40px;
}
.boxb-shuju {
  // background: red;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.b3-box1 {
  width: 48%;
  height: 70px;
  background: rgb(255, 255, 255);
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 5px;
}
.iimmg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: papayawhip;
  text-align: center;
  line-height: 40px;
}
.iimmg2 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(172, 247, 153);
  text-align: center;
  line-height: 40px;
}
.iimmg3 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(141, 223, 238);
  text-align: center;
  line-height: 40px;
}
.iimmg4 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(155, 154, 207);
  text-align: center;
  line-height: 40px;
}
.box4 {
  width: 100%;
  height: 380px;
  background: #fff;
}
.box4-box1 {
  width: 100%;
  height: 40px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border-bottom: 1px solid #000;
}
.box4-box2 {
  width: 100%;
  height: 100px;
  background: rgb(247, 237, 239);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
}
.box4-img {
  width: 40%;
  height: 80px;
  background: red;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box4-img img {
  width: 100%;
  height: 80px;
}
.box-shuju {
  width: 60%;
  height: 100%;
  background: powderblue;
  display: flex;
  flex-direction: column;
  font-size: 10px;
  padding: 0px 10px;
}
.box-span1 {
  width: 100%;
  height: 80%;
  font-weight: bolder;
}
.box-span2 {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ccc;
}
</style>